import React, { useMemo } from 'react';
import { Avatar } from 'antd';
import BizIcon from '@/components/BizIcon';
import moment from 'moment';
import styles from '../index.less';

const EmployeeCard = ({ employeeArchivesData, idPhoto, onClick, ...rest }) => {
    const metaData = useMemo(() => {
        if (employeeArchivesData) {
            return [
                {
                    title: ['', '男', '女'][Number(employeeArchivesData.sex || 0)],
                    value: employeeArchivesData.sex
                },
                {
                    title: `${moment(new Date()).diff(moment(employeeArchivesData?.birthday), 'year')}岁`,
                    value: employeeArchivesData?.birthday
                }
            ];
        }
        return [];
    }, [employeeArchivesData]);

    return employeeArchivesData ? (
        <div className={styles.personInfo} {...rest}>
            <Avatar
                icon="user"
                src={employeeArchivesData?.idPhoto?.[0]?.urlList?.[0]?.url || ''}
                size={42}
                className={styles.employeeAvatar}
            />
            <div className={styles.main}>
                <div className={styles.employee}>
                    {[employeeArchivesData?.employeeName, employeeArchivesData?.employeeEnglishName]
                        .filter(Boolean)
                        .join('/') || ''}
                    <BizIcon className={styles.BizIcon} type="listfunction_edit_icon_default" onClick={onClick} />
                </div>
                <div className={styles.f14}>
                    {metaData
                        .filter(item => item.value)
                        .map(item => item.title)
                        .join(' · ')}
                </div>
            </div>
        </div>
    ) : null;
};

export default EmployeeCard;
